<template>
	<div>
		<main-content
			v-if="!showDetail"
			:tableHeight.sync="tableHeight"
			:otherDependenComponents="otherDependenComponents"
		>
			<template slot="query">
				<el-form
					ref="queryForm"
					:inline="true"
					:model="queryData"
					class="flex-warp-container"
				>
					<el-form-item
						:label="`${$t('common.belong_merchant')}:`"
						prop="merchantId"
						class="flex-row-container"
						label-width="77px"
					>
						<merchant-select
							v-model="queryData.merchantId"
						></merchant-select>
					</el-form-item>
					<el-form-item
						:label="
							$t('funds.fund_audit.commission_settlement_period')
						"
						class="flex-row-container"
						label-width="101px"
					>
						<el-date-picker
							v-model="formTime"
							size="medium"
							:picker-options="pickerOptionsMonth"
							format="yyyy-MM"
							type="monthrange"
							range-separator="-"
							:start-placeholder="
								$t('funds.fund_audit.start_month_placeholder')
							"
							:end-placeholder="
								$t('funds.fund_audit.end_month_placeholder')
							"
							align="right"
							:default-time="defaultTime"
						></el-date-picker>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.fund_audit.order_status')}:`"
						prop="orderStatus"
						class="flex-row-container"
						label-width="77px"
					>
						<el-select
							v-model="queryData.orderStatus"
							style="width: 220px"
							clearable
							:placeholder="$t('common.select_all')"
						>
							<el-option
								v-for="item in orderStatusArr"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						class="flex-row-container"
						:label="`${$t('funds.fund_audit.top_proxy_name')}:`"
						label-width="77px"
					>
						<el-input
							v-model="queryData.topProxyName"
							:placeholder="$t('common.please_enter')"
							clearable
							style="width: 220px"
							size="medium"
							v-input="{ name: 'num_alp' }"
						></el-input>
					</el-form-item>
					<el-form-item
						:label="
							`${$t('funds.fund_audit.adjust_team_commission')}:`
						"
						prop="lockAccount"
						class="flex-row-container"
						label-width="120px"
					>
						<el-input
							v-model="queryData.mixCommissionAmount"
							size="normal"
							clearable
							style="width: 130px"
							:placeholder="$t('common.minimum')"
							maxLength="15"
							v-input="{ name: 'float', num: '2' }"
							name="mixCommissionAmount"
							@blur="
								handleAmount(
									queryData,
									1,
									'mixCommissionAmount',
									'maxCommissionAmount',
									$t(
										'funds.fund_audit.commissionAmountMin_warning'
									)
								)
							"
						></el-input>
						-
						<el-input
							v-model="queryData.maxCommissionAmount"
							size="normal"
							clearable
							style="width: 130px"
							:placeholder="$t('common.maximum')"
							maxLength="15"
							v-input="{ name: 'float', num: '2' }"
							name="maxCommissionAmount"
							@blur="
								handleAmount(
									queryData,
									2,
									'mixCommissionAmount',
									'maxCommissionAmount',
									$t(
										'funds.fund_audit.commissionAmountMax_warning'
									)
								)
							"
						></el-input>
					</el-form-item>
					<el-form-item style="margin-left: 8px">
						<el-button
							type="primary"
							icon="el-icon-search"
							:disabled="loading"
							:loading="loading"
							size="medium"
							@click="search"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							:disabled="loading"
							size="medium"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
					</el-form-item>
				</el-form>
			</template>
			<template slot="content">
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					class="small-size-table"
					:data="dataList"
					style="width: 100%"
					:header-cell-style="getRowClass"
					highlight-current-row
					:max-height="tableHeight"
				>
					<el-table-column
						prop="orderNo"
						align="center"
						:label="$t('funds.order_no')"
						width="270"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<Copy
								v-if="!!scope.row.orderNo"
								:title="scope.row.orderNo"
								:copy="copy"
							>
								{{ scope.row.orderNo }}
							</Copy>
							<span v-else>-</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="reportYm"
						align="center"
						:label="
							$t('funds.fund_audit.commission_settlement_period')
						"
						width="100"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{ scope.row.cycleName }}
						</template>
					</el-table-column>
					<el-table-column
						prop="merchantName"
						align="center"
						:label="$t('common.belong_merchant')"
						width="150"
					>
						<template slot-scope="scope">
							{{ merchantFilter(scope.row.merchantId) || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						prop="topProxyName"
						align="center"
						:label="$t('funds.fund_audit.top_proxy_name')"
						width="130"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<Copy
								v-if="!!scope.row.topProxyName"
								:title="scope.row.topProxyName"
								:copy="copy"
							>
								{{ scope.row.topProxyName }}
							</Copy>
							<span v-else>-</span>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						:label="
							`${$t('funds.fund_audit.adjust_team_commission')}`
						"
						width="150"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>
								{{ handleCurrency(scope.row.currency) }}
								{{
									handleNumber(
										scope.row.currency,
										scope.row.commissionAmount +
											scope.row.commissionAdjustAmount
									)
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="commissionAdjustAmount"
						align="center"
						:label="`${$t('funds.fund_audit.commission_adjust')}`"
						width="180"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>
								{{ handleCurrency(scope.row.currency) }}
								{{
									handleNumber(
										scope.row.currency,
										scope.row.commissionAdjustAmount
									)
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="commissionAmount"
						align="center"
						:label="`${$t('funds.fund_audit.team_commission')}`"
						width="180"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>
								{{ handleCurrency(scope.row.currency) }}
								{{
									handleNumber(
										scope.row.currency,
										scope.row.commissionAmount
									)
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="orderStatus"
						align="center"
						:label="$t('funds.fund_audit.order_status')"
						:width="getWidth(140, 1.4)"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<el-tag
								:type="
									scope.row.orderStatus == 4
										? 'success'
										: 'danger'
								"
							>
								{{ orderStatusMap[scope.row.orderStatus] }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						:label="$t('funds.fund_audit.audit_time')"
						min-width="220"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<p>
								{{ $t('funds.fund_audit.audit_text_1') }}：{{
									scope.row.audit1Time || '-'
								}}
							</p>
							<p v-if="scope.row.audit1Result === 1">
								{{ $t('funds.fund_audit.audit_text_2') }}：{{
									scope.row.audit2Time || '-'
								}}
							</p>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						:label="$t('funds.fund_audit.audit_cost')"
						min-width="150"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<p>
								{{ $t('funds.fund_audit.audit_text_1') }}：{{
									timeTurner(scope.row.audit1Cost) || '-'
								}}
							</p>
							<p v-if="scope.row.audit1Result === 1">
								{{ $t('funds.fund_audit.audit_text_2') }}：{{
									timeTurner(scope.row.audit2Cost) || '-'
								}}
							</p>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						:label="$t('funds.fund_audit.lock_account')"
						min-width="180"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<p>
								{{ $t('funds.fund_audit.audit_text_1') }}：{{
									scope.row.audit1Operator || '-'
								}}
							</p>
							<p v-if="scope.row.audit1Result === 1">
								{{ $t('funds.fund_audit.audit_text_2') }}：{{
									scope.row.audit2Operator || '-'
								}}
							</p>
						</template>
					</el-table-column>
					<!-- <el-table-column align="center" :label="$t('common.remark')" width="180">
							<template slot-scope="scope">
								<p>一审：{{ scope.row.audit1Desc || '-' }}</p>
								<p v-if="scope.row.audit1Result === 1">
									二审：{{ scope.row.audit2Desc || '-' }}
								</p>
							</template>
						</el-table-column> -->
					<el-table-column
						prop="auditStep"
						align="center"
						:label="$t('common.actions')"
						min-width="150"
					>
						<template slot-scope="scope">
							<el-button
								v-if="hasPermission('408061')"
								type="primary"
								size="medium"
								@click="goDetail(scope.row)"
							>
								{{ $t('common.check') }}
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination
					:current-page.sync="pageNum"
					class="pageValue"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="pageSize"
					:page-sizes="pageSizes"
					:total="total"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</template>
		</main-content>

		<detail v-else :detailData="rowData" @goBack="goBack"></detail>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { getUsername } from '@/utils/auth'
import { routerNames } from '@/utils/consts'
import detail from './components/detail'
import MainContent from '@/components/MainContent/index.vue'

const end = () => {
	return dayjs().endOf('month')
}
const start = () => {
	return dayjs()
		.startOf('month')
		.subtract(29, 'day')
}

export default {
	name: routerNames.commissionReviewRecord,
	components: { detail, MainContent },
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			loading: false,
			queryData: {
				orderNo: undefined,
				proxyName: undefined,
				orderStatus: undefined,
				inputType: 1
			},
			showDetail: false,
			formTime: [start(), end()],
			showClear1: false,
			showClear2: false,
			rowData: {},
			name: '',
			dataList: [],
			orderStatusArr: [
				{
					code: '4',
					description: this.$t('funds.fund_audit.pass_the_audit')
				},
				{
					description: this.$t('funds.fund_audit.audit_fail_1'),
					code: '1'
				},
				{
					code: '3',
					description: this.$t('funds.fund_audit.audit_fail_2')
				}
			],
			orderStatusMap: {
				1: this.$t('funds.fund_audit.audit_fail_1'),
				3: this.$t('funds.fund_audit.audit_fail_2'),
				4: this.$t('funds.fund_audit.pass_the_audit')
			}
		}
	},
	computed: {},
	mounted() {
		this.name = getUsername()
	},
	methods: {
		hiddenClearIcon(key) {
			setTimeout(() => {
				this[key] = false
			}, 200)
		},
		clearable(key) {
			this.$delete(this.queryData, key)
		},
		cleanBlankSpace(key, key1) {
			if (this[key][key1]) {
				this[key][key1] = (this[key][key1] + '').replace(/\s+/g, '')
			}
		},
		timeTurner(time) {
			var day = Math.floor(time / 86400) // 整数部分代表的是天；一天有24*60*60=86400秒 ；

			time = time % 86400 // 余数代表剩下的秒数；

			var hour = Math.floor(time / 3600) // 整数部分代表小时；

			time %= 3600 // 余数代表 剩下的秒数；

			var minute = Math.floor(time / 60)

			time %= 60

			var str = `${day > 0 ? day + 'd' : ''}${
				hour > 0 || day ? hour + 'h' : ''
			}${minute > 0 || hour ? minute + 'm' : ''}${time}s`
			return str
		},
		filterOrderStatus(code) {
			const item = this.orderStatusArr.find(
				(item) => item.code === String(code)
			)
			return item ? item.description : '-'
		},
		loadData() {
			this.loading = true
			const [startTime, endTime] = this.formTime || []
			/**
			 * 佣金结束月份，格式：yyyy-MM - endMonth
			 * 商户号 - merchantId
			 * 订单号 - orderNo
			 * 订单状态 - orderStatus
			 * 当前页,默认第1页 - pageNum
			 * 每页条数,默认20条 - pageSize
			 * 佣金开始月份，格式：yyyy-MM - startMonth
			 * 团队佣金最大值 - teamCommissionMax
			 * 团队佣金最小值 - teamCommissionMin
			 * 总代理账号 - topProxyName
			 */
			let params = {
				...this.queryData,
				cycleStartDate: startTime
					? dayjs(startTime)
							.startOf('month')
							.format('YYYYMMDD')
					: undefined,
				cycleEndDate: endTime
					? dayjs(endTime)
							.endOf('month')
							.format('YYYYMMDD')
					: undefined
			}
			params = {
				...this.getParams(params)
			}
			// if (params.inputType === 1) {
			// 	params.topProxyName = params.inputValue || undefined
			// 	params.orderNo = undefined
			// } else {
			// 	params.orderNo = params.inputValue || undefined
			// 	params.topProxyName = undefined
			// }
			delete params.inputValue
			delete params.inputType
			this.$api
				.getProxyCommissionSelectAuditRecordList(params)
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						const { record, totalRecord } = res.data || {}
						this.dataList = Array.isArray(record)
							? Object.freeze(record)
							: []
						this.total = totalRecord || 0
					} else {
						this.$message({
							message: res?.msg,
							type: 'error'
						})
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		goDetail(row) {
			this.rowData = row
			this.showDetail = true
		},
		goBack() {
			this.showDetail = false
			this.loadData()
		},
		reset() {
			this.queryData = {
				orderNo: undefined,
				proxyName: undefined,
				orderStatus: undefined,
				inputType: 1
			}
			this.formTime = [start(), end()]
			this.loadData()
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
::v-deep .caret-wrapper {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.data-refresh {
	margin-top: 0;
	padding-bottom: 20px;
}
::v-deep .el-input-group__prepend {
	width: 110px;
}
.el-input-number_container {
	display: inline-block;
	position: relative;
	.close_icon {
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;
		color: #ccc;
	}
}
</style>
